<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false"%>
<c:set var="cp" scope="session" value="${pageContext.request.servletContext.contextPath}"/>

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>cart</title>
		<link rel="stylesheet" type="text/css" href="${cp }/css/ordercenter/public.css"/>
		<link rel="stylesheet" type="text/css" href="${cp }/css/ordercenter/proList.css" />
	</head>
	<body>
		<!--------------------------------------cart--------------------->
		<div class="head ding">
			<div class="wrapper clearfix">
				<div class="clearfix" id="top">
					<h1 class="fl"><a href="index.html"><img src="${cp }/images/logo.png"/></a></h1>
					<div class="fr clearfix" id="top1">
						<p class="fl">
							<a href="login.html" id="login">登录</a>
							<a href="reg.html" id="reg">注册</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="cart mt">
			<!-----------------logo------------------->
			<!--<div class="logo">
				<h1 class="wrapper clearfix">
					<a href="index.html"><img class="fl" src="${cp}/images/usercenter/img/temp/logo.png"></a>
					<img class="top" src="${cp}/images/usercenter/img/temp/cartTop01.png">
				</h1>
			</div>-->
			<!-----------------site------------------->
			<div class="site">
				<p class=" wrapper clearfix">
					<span class="fl">购物车</span>
					<img class="top" src="${cp}/images/usercenter/img/temp/cartTop01.png">
					<a href="index.html" class="fr">继续购物&gt;</a>
				</p>
			</div>
			<!-----------------table------------------->
			<div class="table wrapper">
				<div class="tr">
					<div>商品</div>
					<div>单价</div>
					<div>数量</div>
					<div>小计</div>
					<div>操作</div>
				</div>
				
				<div id="carsHTML">
					<c:forEach items="${carList }" var="car">
					<div class="th">
						<div class="pro clearfix">
							<label class="fl">
								<input type="checkbox" />
	    						<span></span>
							</label>
							<a class="fl" href="#">
								<dl class="clearfix">
									<dt class="fl"><img src="${cp}/images/usercenter/img/temp/cart02.jpg"></dt>
									<dd class="fl">
										<p>创意现代简约干花花瓶摆件</p>
										<p>颜色分类:</p>
										<p>白色瓷瓶+白色串枚</p>
									</dd>
								</dl>
							</a>
						</div>
						<div class="price">￥35.00</div>
						<div class="number">
							<p class="num clearfix">
								<img class="fl sub" src="${cp}/images/usercenter/img/temp/sub.jpg" onclick="sub('xx');">
								<span class="fl" id="xx_carid">1</span>
								<img class="fl add" src="${cp}/images/usercenter/img/temp/add.jpg" onclick="add('xx');">
							</p>
						</div>
						<div class="price sAll">￥30.00</div>
						<div class="price"><a class="del" href="#2">删除</a></div>
					</div>
					</c:forEach>
				</div>
				
				
				<div class="goOn">空空如也~<a href="index.html">去逛逛</a></div>
				<div class="tr clearfix">
					<label class="fl">
						<input  type="checkbox"/>
						<span></span>
					</label>
					<p class="fl">
						<a href="#">全选</a>
						<a href="#" class="del">删除</a>
					</p>
					<p class="fr">
						<span>共<small id="sl">0</small>件商品</span>
						<span>合计:&nbsp;<small id="all">￥0.00</small></span>
						<a href="order.html" class="count">结算</a>
					</p>
				</div>
			</div>
		</div>
		<div class="mask"></div>
		<div class="tipDel">
			<p>确定要删除该商品吗？</p>
			<p class="clearfix">
				<a class="fl cer" href="#">确定</a>
				<a class="fr cancel" href="#">取消</a>
			</p>
		</div>
		<!--返回顶部-->
		<div class="gotop">
			<a href="cart.html">
			<dl>
				<dt><img src="${cp}/images/usercenter/img/gt1.png"/></dt>
				<dd>去购<br />物车</dd>
			</dl>
			</a>
			<a href="#" class="dh">
			<dl>
				<dt><img src="${cp}/images/usercenter/img/gt2.png"/></dt>
				<dd>联系<br />客服</dd>
			</dl>
			</a>
			<a href="mygxin.html">
			<dl>
				<dt><img src="${cp}/images/usercenter/img/gt3.png"/></dt>
				<dd>个人<br />中心</dd>
			</dl>
			</a>
			<a href="#" class="toptop" style="display: none;">
			<dl>
				<dt><img src="${cp}/images/usercenter/img/gt4.png"/></dt>
				<dd>返回<br />顶部</dd>
			</dl>
			</a>
			<p>400-800-8200</p>
		</div>
		<!--footer-->
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="#2" class="fl"><img src="${cp}/images/usercenter/img/foot1.png"/></a>
						<span class="fl">7天无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="${cp}/images/usercenter/img/foot2.png"/></a>
						<span class="fl">15天免费换货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="${cp}/images/usercenter/img/foot3.png"/></a>
						<span class="fl">满599包邮</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="${cp}/images/usercenter/img/foot4.png"/></a>
						<span class="fl">手机特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
		<!----------------mask------------------->
		<div class="mask"></div>
		<!-------------------mask内容------------------->
		<div class="proDets">
			<img class="off" src="img/temp/off.jpg" />
			<div class="proCon clearfix">
				<div class="proImg fr">
					<img class="list" src="img/temp/proDet.jpg"  />
					<div class="smallImg clearfix">
						<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
						<img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
						<img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
						<img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
					</div>
				</div>
				<div class="fl">
					<div class="proIntro change">
						<p>颜色分类</p>
						<div class="smallImg clearfix">
							<p class="fl on"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p>
							<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p>
							<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p>
							<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p>
						</div>
					</div>
					<div class="changeBtn clearfix">
						<a href="#2" class="fl"><p class="buy">确认</p></a>
						<a href="#2" class="fr"><p class="cart">取消</p></a>
					</div>
				</div>
			</div>
		</div>
		<div class="pleaseC">
			<p>请选择宝贝</p>
			<img class="off" src="img/temp/off.jpg" />
		</div>
	</body>
	
	<script type="text/javascript" src="${cp }/js/jquery-3.2.1.js"></script>
	<script type="text/javascript">
	
	$(document).ready(function() {
		//listCars();
	});
	
	function listCars() {
		$.ajax({
			 url:'${cp}/car/listCar.do',
			    type:'POST', //GET
			    data:{
			    },
			    timeout:5000,    //超时时间
			    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
			    success:function(data){
			    	if(!data.success) {
			    		alert(data.message);
			    		return false;
			    	}
			    	
			    	var results = data.data;
			    	var carHtml = '';
			    	for(var i=0;i<results.length;i++) {
			    		var result = results[i];
			    		carHtml += '<div class="th">';
			    		carHtml += '<div class="pro clearfix">';
			    		carHtml += '<label class="fl">';
			    		carHtml += '<input type="checkbox" />';
			    		carHtml += '<span></span>';
			    		carHtml += '</label>';
			    		carHtml += '<a class="fl" href="#">';
			    		carHtml += '<dl class="clearfix">';
			    		carHtml += '<dt class="fl"><img src="${cp}/images/usercenter/img/temp/cart02.jpg"></dt>';
			    		carHtml += '<dd class="fl">';
			    		carHtml += '<p>创意现代简约干花花瓶摆件</p>';
			    		carHtml += '<p>白色瓷瓶+白色串枚</p>';
			    		carHtml += '</dd>';
			    		carHtml += '</dl>';
			    		carHtml += '</a>';
			    		carHtml += '</div>';
			    		
			    		carHtml += '<div class="price">￥35.00</div>';
			    		carHtml += '<div class="number">';
			    		carHtml += '<p class="num clearfix">';
			    		carHtml += '<img class="fl sub" src="${cp}/images/usercenter/img/temp/sub.jpg" onclick="sub("num_'+result.id+'");">';
			    		carHtml += '<span class="fl" id="xx_carid">1</span>';
			    		carHtml += '<img class="fl sub" src="${cp}/images/usercenter/img/temp/sub.jpg" onclick="sub("num_'+result.id+'");">';
			    		
			    		carHtml += '</p>';
			    		carHtml += '</div>';
			    		carHtml += '<div class="price sAll">￥30.00</div>';
			    		carHtml += '<div class="price"><a class="del" href="#2">删除</a></div>';
			    		carHtml += '</div>';
			    		
			    	}
			    	$('#carsHTML').html(carHtml);
			    },
			    error:function(xhr,textStatus){
			        console.log('错误')
			        console.log(xhr)
			        console.log(textStatus)
			    },
			    complete:function(){
			        console.log('结束');
			        addressFlag = true;
			    }
		});
	}
	
		function add(id) {
			var ss  = $("#"+id).html();
			ss = parseInt(ss) + 1;
			$('#xx').html(ss);
		}
		
		function sub(id) {
			var ss  = $("#"+id).html();
			ss = parseInt(ss) - 1;
			if(ss <= 0) {
				return false;
			}
			$('#xx').html(ss);
		}
	</script>
</html>
